<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
	<div id='app' style="display:none" v-show="true">
		<div class="news_nav red" id="news_nav">
			<div @click="selectType(i, $event)" v-for="(item, i) of types" :class="{'active': i === activeIndex}"><span>{{item.name}}</span></div>
		</div>
	</div>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				click: false,
				scrollWidth: 1000,
				activeIndex: 0,
				types: [],
				translateX: 0,
				isLogin: false,
				appNewsBanners: []
			},
			mounted: function () {
				var $this = this;
				apiready = function () {
					// hide this frame
					api.setFrameAttr({
						name: api.frameName,
						hidden: true
					});
					// fix header
					var header = document.querySelector('.news_nav');
					$api.fixStatusBar(header);
					$this.init();
				}
			},
			methods: {
				init: function () {
					var $this = this;
					var userInfo = $api.getStorage(_.USERINFO);
					$this.isLogin = !!userInfo;
					$this.addEventListener();
				},
				calcWidth: function () {

				},
				calcScroll: function (i) {

				},
				getNewsGenre: function () {
					var $this = this;

					post('/client/webConfig/appGenreConfigs', {
						genre: "app_newsGenre"
					}, function (ret) {
						if (ret.isSuccess) {
							$this.types = ret.data.appNewsGenres.map(function (appNewsGenre) {
								return {
									newsgenreid: appNewsGenre.configValue,
									name: appNewsGenre.configKeyName
								}
							})
							$this.getNewsBanner();
						} else {
							msgUtil.toast({
								msg: ret.message
							});
						}
					});
				},
				getNewsBanner: function () {
					var $this = this;
					post('/client/webConfig/appGenreConfigs', {
						genre: "app_news_banner"
					}, function (ret) {
						if (ret.isSuccess) {
							$this.appNewsBanners = ret.data.appNewsBanners;

							$this.openFrameGroup();
							api.setFrameGroupAttr({
								name: 'newsGroup',
								hidden: false
							});
						}
					});
				},
				openFrameGroup: function() {
					var $this = this;
					// var header = document.querySelector($this.isLogin ? '.news_nav' : 'header');
					var header = document.querySelector('.news_nav');
					$api.fixStatusBar(header);
					api.sendEvent({name: 'openNewsFrameGroup', extra: {header: header, frames: $this.types, appNewsBanners: $this.appNewsBanners}});

				},
				selectType: function (i, $event) {
					var $this = this;
					if ($this.activeIndex === i) return;
					$this.translateX = $event.target.offsetLeft + ($event.target.offsetWidth - 40) / 2 - 14;
					$this.click = true;
					$this.activeIndex = i;
					api.setFrameGroupIndex({
						name: 'newsGroup',
						scroll: true,
						index: i
					});

					var nav_index = i;

					document.getElementById('news_nav').scrollLeft = 0;
					for (var j = 0; j < nav_index; j++) {
						document.getElementById('news_nav').scrollLeft += document.getElementById('news_nav').children[j].offsetWidth;
					}

					$this.click ? $this.click = false : $this.activeIndex = i;
				},
				addEventListener: function() {
					var $this = this;
					var header = document.querySelector($this.isLogin ? '.top_nav' : 'header');
					api.addEventListener({
						name: 'open_news_group_event'
					}, function(ret, err) {
						$this.getNewsGenre();
					});
					api.addEventListener({
						name: 'hide_news_group_event'
					}, function(ret, err) {
						api.setFrameGroupAttr({
							name: 'newsGroup',
							hidden: true
						});
					});
				}
			}
		});
	</script>
</body>

</html>
